<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="pageTop">
				<view class="headCont">
					<view class="serchCont">
						<view class="serchInput">
							<input v-model="search" @input="inputFn($event)" placeholder="请输入培训名称 | 学校 ｜ 编号搜索" />
							<view class="serchBtn iconfont icon-sousuo" @click="serchFn"></view>
						</view>
					</view>
				</view>
			</view>
			<scroll-view class="workCont" scroll-y="true" @scrolltolower="scrolltolower" lower-threshold="10" >
				<view class="workItem"  :key="index" v-for="(item,index) in listArr">
					<view class="workHead">
						<view class="workName">{{item.training_number}} · {{item.training_name}}</view>
						<view class="workMoney">{{item.total_money}}元</view>
					</view>
					<view class="workInfo">
						<view class="infoItem">
							<view class="infoName">培训类型</view>
							<view class="infoText">{{item.training_type}}</view>
						</view>
						<view class="infoItem">
							<view class="infoName">培训人数</view>
							<view class="infoText">{{item.training_people}}
							<span class="redText" v-if="item.sy_training_people<=5&&item.sy_training_people>0">（剩余{{item.sy_training_people}}个名额）</span>
							<span class="redText" v-if="item.sy_training_people==0">（报名已满）</span>
							</view>
						</view>
						<view class="infoItem">
							<view class="infoName">培训时长</view>
							<view class="infoText">{{item.training_time}}</view>
						</view>
						<view class="infoItem">
							<view class="infoName">开课时间</view>
							<view class="infoText">{{item.training_sk_time}}</view>
						</view>
					</view>
					<view class="workCom">
						<view class="comImg">
							<image :src="item.training_logo" /></image>
						</view>
						<view class="comInfo">
							{{item.training_school_name}}
						</view>
						<view class="shareBtn" @click="createImg(item)">赚{{item.commission}}佣金</view>
					</view>
				</view>
				<u-popup :show="showShareImg" @close="showShareImg = false" :closeOnClickOverlay="true" mode="center" round="10">
					<view class="tipMask" style="width: 300px">
						<image mode="widthFix" :src="shareImg"></image>
						<view class="saveBtn" @click="downFn">保存到手机</view>
					</view>
				</u-popup>
				<noData v-if="listArr.length==0&&!isChange"></noData>
				<loadMore v-if="listArr.length>0&&!isChange&&last_page==page"></loadMore>
			</scroll-view >
		</view>
		<tabBar></tabBar>
		<load v-if="!showCont||isChange"></load>
		<subLoad v-if="showSub"></subLoad>
		<u-picker :show="showType" @confirm="typeSureFn" @cancel="showType = false" @close="showType = false" :closeOnClickOverlay="true" :columns="typeArr"></u-picker>
		<u-picker :show="showTime" @confirm="timeSureFn" @cancel="showTime = false" @close="showTime = false" :closeOnClickOverlay="true" :columns="timeArr"></u-picker>
		<u-picker :show="showCity" ref="cityPicker" :columns="cityArr" @confirm="citySureFn" @change="changeCityFn" @cancel="showCity = false" @close="showCity = false" :closeOnClickOverlay="true"></u-picker>
	</view>
</template>

<script>
	import tabBar from '@/components/shareBar.vue'
	import city from "@/utils/city";
	import getCate from '@/utils/getCate.js'
	import api from '@/http/api.js'
	import load from '@/components/load.vue'
	import noData from '@/components/noData.vue'
	import subLoad from '@/components/sub.vue'
	import loadMore from '@/components/loadMore.vue'
	export default {
		components:{tabBar,load,noData,loadMore,subLoad},
		
		data() {
			return {
				showCont:false,
				showShareImg:false,
				isChange:false,
				showSub:false,
				search:'',
				page:1,
				per_page:10,
				last_page:0,
				listArr:[],
				shareImg:'',
			};
		},
		methods:{
			inputFn(){
				if(this.search==''){
					this.serchFn()
				}
			},
			downFn(){
				uni.downloadFile({
					url:this.shareImg,
					success: (res) => {
						console.log(res.statusCode==200)
						if(res.statusCode==200){
							let filePath = res.tempFilePath;
							this.saveImageToAlbum(filePath)
						}else{
							uni.showToast({
								title: '保存失败',
								icon: 'error'
							});
						}
					}
				})
			},
			saveImageToAlbum(tempFilePath) {
			  uni.saveImageToPhotosAlbum({
				filePath: tempFilePath, // 下载后的临时文件路径
				success: () => {
				  uni.showToast({
					title: '保存成功',
					icon: 'success'
				  });
				},
				fail: (err) => {
				  uni.showToast({
					title: '保存失败',
					icon: 'none'
				  });
				  console.error(err);
				}
			  });
			},
			createImg(item){
				let data = {
					training_content_id:item.training_content_id
				}
				this.showSub=  true
				api.getRequst(data,'/api/Task/tgQrCode').then((res)=>{
					this.showSub = false
					if(res.code==1){
						this.shareImg = res.data
						this.showShareImg = true
					}
				})
			},
			scrolltolower(){
				if(this.page<this.last_page){
					this.page++
					this.isChange = true
					this.getData()
				}
			},
			serchFn(){
				this.page =1
				this.listArr = []
				this.isChange = true
				this.getData()
			},
			getData(){
				let data = {
					page:this.page,
					per_page:this.per_page,
					search:this.search,
				}
				api.getRequst(data,'/api/Task').then((res)=>{
					if(res.code==1){
						let arr = res.data.data
						for(let item of arr){
							this.listArr.push(item)
						}
						this.last_page = res.data.last_page
					}
					this.showCont = true
					this.isChange = false
				})
			}
		},
		async onLoad() {
			this.getData()
		}
	}
</script>

<style lang="scss">
	.showCont{
		box-sizing: border-box;
		height: 100vh;
		padding-bottom: 120rpx;
		display: flex;
		flex-direction: column;
	}
	.headCont{
		background-color: #fff;
		.serchCont{
			display: flex;
			align-items: center;
			padding: 30rpx 4%;
			box-sizing: border-box;
			.serchInput{
				border: 1px solid #3f55cc;
				display: flex;
				align-items: center;
				padding: 0rpx 15rpx;
				padding-left: 40rpx;
				height: 80rpx;
				box-sizing: border-box;
				flex: 1;
				width: 100rpx;
				border-radius: 50rpx;
				.serchBtn{
					background-image: linear-gradient(to right bottom,#9ecffd,#3f55cc);
					color: #fff;
					height: 60rpx;
					font-size: 30rpx;
					padding: 0 40rpx;
					border-radius: 50rpx;
					margin-left: 30rpx;
					line-height: 60rpx;
				}
				input{
					flex: 1;
					width: 100rpx;
				}
			}
			.sortCont{
				height: 80rpx;
				width: 80rpx;
				background-color: #fff;
				border-radius: 50%;
				margin-left: 30rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 46rpx;
			}
			.cityCont{
				width: 130rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #fff;
				margin-right: 30rpx;
				.cityText{
					flex: 1;
					width: 50rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.iconfont{
					font-size: 30rpx;
				}
			}
		}
	}
	.serchRight{
		display: flex;
		justify-content: space-between;
		align-items: center;
		// background-color: #f8f8f8;
		padding: 0rpx 4% 30rpx;
		box-sizing: border-box;
		.serchItem{
			padding: 15rpx 10rpx;
			box-sizing: border-box;
			width: 30%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			color: #666;
			font-size: 22rpx;
			border-radius: 8rpx;
			.serchText{
				max-width: 130rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.iconfont{
				font-size: 20rpx;
				position: relative;
				top: 6rpx;
				left: -4rpx;
			}
		}
	}
	.workCont{
		width: 100%;
		height: 500rpx;
		flex: 1;
		padding: 20rpx 4% 30rpx;
		overflow-y: auto;
		box-sizing: border-box;
		.workItem{
			background-color: #fff;
			padding: 30rpx 4% 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			.workHead{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.workName{
					font-size: 28rpx;
					font-weight: bold;
					flex: 1;
					width: 100rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 30rpx;
				}
				.workMoney{
					color: #3f55cc;
				}
			}
			.workInfo{
				.infoItem{
					display: flex;
					align-items: center;
					margin-top: 15rpx;
					.infoName{
						width: 120rpx;
						margin-right: 15rpx;
						color: #666;
					}
					.infoText{
						flex: 1;
						width: 100rpx;
						.redText{
							color: #ff5757;
						}
					}
					
				}
			}
			.workCom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				padding-top: 20rpx;
				.comImg{
					width: 60rpx;
					height: 60rpx;
					overflow: hidden;
					font-size: 0;
					border-radius: 50%;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.comInfo{
					flex: 1;
					width: 100rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				.shareBtn{
					  font-size: 22rpx;
					  background-image: linear-gradient(to right , #ff9b3d, #eb5f2a);
					  color: #fff;
					  padding:15rpx 30rpx;
					  border-radius: 100rem;
				}
			}
		}
	}
	.tipMask{
		padding: 30rpx 30rpx 0;
		image{
			width: 100%;
		}
		.tipName{
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
		}
		.tipNum{
			color: #3f55cc;
			font-size: 30rpx;
			text-align: center;
			margin-top: 30rpx;
		}
		.tipDes{
			font-size: 24rpx;
			color: #666;
			margin-top: 20rpx;
			max-height: 800rpx;
			overflow-y: auto;
		}
		.saveBtn{
			width: 100%;
			padding: 30rpx 0;
			box-sizing: border-box;
			margin-top: 40rpx;
			text-align: center;
			background-image: linear-gradient(to right bottom,#a3bffe,#3f55cc);
			color: #fff;
			border-radius: 50rpx;
			font-size: 22rpx;
		}
	}
</style>
